<template>
    <div class="classic-demo">
        <div class="author-demo">
            <div>作者：陈炼</div>
            <div>日期：2017/11/02</div>
        </div>
        <Table stripe :columns="columns1" :data="data1"></Table>
        <h3 style="color:#f00">！！！使用场景：纵向列数较多，且两侧或一侧固定；如下，在columns参数中给每一列固定宽度，需固定项加 fixed:'left' 或 fixed:'right' 参数即可</h3>
        <pre style="background-color: #ececec;">

            <code class="html" v-text="htmlCode">
            </code>
        </pre>
        <pre style="background-color: #ececec;">
            <code class="html">
                export default {
                    data () {
                        return {
                            columns1: [
                                {
                                    title: '姓名',
                                    key: 'name',
                                    width:110，
                                    fixed:'left',
                                },
                                {
                                    title: '年龄',
                                    key: 'age',
                                    width:110
                                },
                                {
                                    title: '地址',
                                    key: 'address',
                                    width:210
                                },
                                {
                                    title: '地址1',
                                    key: 'address1',
                                    width:210
                                },
                                {
                                    title: '地址2',
                                    key: 'address2',
                                    width:200
                                },
                                {
                                    title: '地址3',
                                    key: 'address3',
                                    width:210
                                },
                                {
                                    title: '地址4',
                                    key: 'address4',
                                    width:210
                                },
                                {
                                    title: '地址5',
                                    key: 'address5',
                                    width:210
                                },
                                {
                                    title: '地址6',
                                    key: 'address6',
                                    width:210,
                                    fixed:'right',
                                }
                            ]
                        }
                    }
                }
            </code>
        </pre>
    </div>
</template>
<script>
    import hljs from 'highlight.js'
    export default {
        data () {
            return {
                /*tableWidth: window.innerWidth<=1080?1080:'auto',:width="tableWidth"*/
                columns1: [
                    {
                        title: '姓名',
                        key: 'name',
                        width:110,
                        fixed:'left',
                    },
                    {
                        title: '年龄',
                        key: 'age',
                        width:110
                    },
                    {
                        title: '地址',
                        key: 'address',
                        width:210
                    },
                    {
                        title: '地址1',
                        key: 'address1',
                        width:210
                    },
                    {
                        title: '地址2',
                        key: 'address2',
                        width:200
                    },
                    {
                        title: '地址3',
                        key: 'address3',
                        width:210
                    },
                    {
                        title: '地址4',
                        key: 'address4',
                        width:210
                    },
                    {
                        title: '地址5',
                        key: 'address5',
                        width:210
                    },
                    {
                        title: '地址6',
                        key: 'address6',
                        width:210,
                        fixed:'right'
                    }
                ],
                data1: [
                    {
                        name: '王小明',
                        age: 18,
                        address: '北京市朝阳区芍药居',
                        address1: '北京市朝阳区芍药居',
                        address2: '北京市朝阳区芍药居',
                        address3: '北京市朝阳区芍药居',
                        address4: '北京市朝阳区芍药居',
                        address5: '北京市朝阳区芍药居',
                        address6: '北京市朝阳区芍药居'
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗',
                        address1: '北京市朝阳区芍药居',
                        address2: '北京市朝阳区芍药居',
                        address3: '北京市朝阳区芍药居',
                        address4: '北京市朝阳区芍药居',
                        address5: '北京市朝阳区芍药居',
                        address6: '北京市朝阳区芍药居'
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道',
                        address1: '北京市朝阳区芍药居',
                        address2: '北京市朝阳区芍药居',
                        address3: '北京市朝阳区芍药居',
                        address4: '北京市朝阳区芍药居',
                        address5: '北京市朝阳区芍药居',
                        address6: '北京市朝阳区芍药居'
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道',
                        address1: '北京市朝阳区芍药居',
                        address2: '北京市朝阳区芍药居',
                        address3: '北京市朝阳区芍药居',
                        address4: '北京市朝阳区芍药居',
                        address5: '北京市朝阳区芍药居',
                        address6: '北京市朝阳区芍药居'
                    }
                ],
                htmlCode:'<Table stripe :columns="columns1" :data="data1"></Table>',
            }
        },
        mounted: function () {
            window.setTimeout(function () {
                $('.classic-demo pre code').each(function(i, block) {
                    hljs.highlightBlock(block)
                })
            }, 100)
        },
    }
</script>
